<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>数据绑定</title>
</head>
<body>
<!--<h2>数据绑定:(表现形式)</h2>
<p>一旦更新了data中的某个数据,所有界面上直接或者间接使用了此属性的节点都会更新</p>

<h2>数据劫持:(实现技术)</h2>
<p>通过Object.defineProperty结合订阅发布模式,劫持所有data中的属性,一旦发生变化就去更新界面</p>-->

<!--模版中有多少个表达式(大括号表达式||指令表达式) 那么就会创建多少个watcher (事件指令除外)-->
<div id="app">
    <h2 v-html="name"></h2><!--name: watcher1:{depIds:{0:dep0}}-->
    <p v-text="name"></p><!--name: watcher2:{depIds:{0:dep0}}-->
    <p>{{name}}</p><!--name: watcher3:{depIds:{0:dep0}}-->
    <p>{{friend.name}}</p><!--friend.name: watcher-->
    <button v-on:click="onUpdate">更新</button>
</div>
</body>
<script src="./mvvm-master/js/compile.js"></script>
<script src="./mvvm-master/js/observer.js"></script>
<script src="./mvvm-master/js/watcher.js"></script>
<script src="./mvvm-master/js/mvvm.js"></script>
<script>
    //实现数据绑定
    //初始化显示: 页面(表达式和指令) 从data中读取数据显示到页面中
    //更新: 更新data中的数据 ===> 页面上跟着更新


    const vm = new MVVM({
        el: "#app",
        data: {
            name: "你好世界",//Dep-->{id:0 subs:[watcher1,watcher2,watcher3]}
            age: 18,//Dep-->{id:1 subs:[]}
            friend: {//Dep-->{id:2 subs:[]}
                name: "Vue",//Dep-->{id:3 subs:[friend.name: watcher]}
                age: 2.0 //Dep-->{id:4 subs:[]}
            }
        },
        methods:{
            onUpdate(){
                this.name = "hello word"
                // this.name = {a:1,b:2}
                // this.data.name = "hello word"
            }
        }
    })
    console.log(vm)
</script>
</html>